.player {

  background: $nav;
  position: fixed;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 0;
  border-top: $darkBorder;
  z-index: 1;

  transition: height 0.2s;
  -webkit-transition: height 0.2s;
  transition-timing-function: ease;
  -webkit-transition-timing-function: ease;

  &-visible {
    height: $padding * 3;
  }

  &-content {
    position: relative;
    display: flex;
    justify-content: start;
    height: 100%;
    margin-left: 25%;

    &-name {
      width: 50%;
    }

    &-action {
      font-size: $bigIcon;
      cursor: pointer;

      &:hover {
        color: $mainColor;
      }

      i {
        width: $bigIcon;

        &.is-favorite {
          color: $mainColor;
        }
      }
    }

    div {
      margin: auto $padding;
    }

  }

}